<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-1">
  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">
    {{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
  </div>
  @if (!this.widget.location || !this.widget.location.id) {
  <div class="d-flex flex-row flex-grow-1 align-items-center w-100 gridster-item-content text-center">
    <div class="d-flex flex-column w-100 pb-2">
      <h1><i class="fas fa-cloud-sun"></i></h1>
      <p class="grey-text">{{ 'status.widget.weather.label_config_required_help' | translate }}</p>
    </div>
  </div>
  } @if (widget.location && widget.location.id && currentWeather) {
  <div class="d-flex flex-row flex-grow-1 align-items-center w-100 gridster-item-content p-2">
    <div class="d-flex flex-column w-100">
      <div class="weather-now d-flex flex-column align-items-center text-center">
        <h1>
          <i class="primary-text" [ngClass]="getWeatherIconClass()"></i>
        </h1>
        <h3>{{ currentWeather.weather[0].description | titlecase }}</h3>
        <h2>{{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}&deg;{{ temperatureUnits | uppercase }}</h2>
      </div>
    </div>
  </div>
  }
</div>
